<template>
  <MainFrame menuIndex="JoinList">
    <div slot='content'>
      <div class="top-title">
        参赛选手列表
      </div>
      <div class="page">
        <div class="top" style="margin-bottom: 10px">
          <el-row>
            <!-- <el-col :span="4">
              <el-input v-model="keyword" placeholder="请输入关键字" style="width: 90%;"></el-input>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
            </el-col> -->
            <el-col :span="4">
              <el-button type="primary" @click="add" icon="el-icon-plus">添加参赛选手</el-button>
            </el-col>
          </el-row>
        </div>
        <el-table :data="items" border style="width: 100%" height="780" stripe>
          <el-table-column prop="no" label="编号" width="80">
            <template slot-scope="scope">
              <el-button type="text" @click="edit(scope.row)">{{scope.row.no}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="edit(scope.row)">{{scope.row.title}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="vote" label="当前票数" width="100">
          </el-table-column>
          <el-table-column prop="position" label="当前排名" width="100">
          </el-table-column>
          <el-table-column prop="nextVote" label="距离下一名票数" width="100">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
          <el-table-column prop="addTime" label="添加时间" width="150">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" @click="editVote(scope.row)">修改票数</el-button>
              <el-button type="text" style="color:#F56C6C" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination background layout="prev, pager, next" :page-count="page.total" :page-size="page.size" @current-change="onPageChanged">
      </el-pagination>
      <el-dialog :title="join.title" :visible.sync="dialogFormVisible">
        <el-form :model="join">
          <el-form-item label="票数" label-width="150">
            <el-input v-model="join.vote" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </MainFrame>
</template>
<script>
import MainFrame from '@/components/MainFrame';
import utils from '../ttJs/utils.js'
import { validateData } from '../ttJs/utils.js'
export default {
  components: {
    MainFrame,
  },
  data() {
    return {
      activityId: null,
      page: {
        total: 0,
        size: 0,
      },
      pageIndex: 1,
      items: [],
      keyword: '',
      dialogFormVisible: false,
      join: {
        id: '',
        title: '',
        vote: 0
      }
    };
  },
  mounted: function() {
    this.activityId = this.$route.query.id;
    this.getItems(this.pageIndex);
  },
  methods: {
    onPageChanged(page) {
      this.pageIndex = page
      this.getItems(page)
    },
    getItems(page) {
      var self = this
      var url = '/toupiao/admin/joins'
      console.log(self.activityId);
      var params = {
        activityId: self.activityId,
        page: page
      }
      var success = function(response) {
        self.items = response.info;
        self.page.total = response.total;
        self.page.size = response.size;
      }
      var fail = function() {}
      var complete = function() {}
      utils.requestLoading(url, params, success, fail, complete)
    },
    add() {
      var self = this
      self.$router.push({ name: 'Join', query: { activityId: self.activityId } })
    },
    edit(item) {
      var self = this
      self.$router.push({ name: 'Join', query: { id: item.id, activityId: self.activityId } })
    },
    editVote(item) {
      var self = this;
      self.dialogFormVisible = true;
      self.join.id = item.id;
      self.join.title = item.title;
      self.join.vote = item.vote;
    },
    del(item) {
      var self = this
      var event = function() {
        var params = { id: item.id }
        var url = '/toupiao/admin/deleteJoin'
        var success = function(response) {
          self.getItems(self.pageIndex);
          self.$message({
            message: '删除成功',
            type: 'success'
          });
        }
        var fail = function() {
          utils.fail('删除失败')
        }
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete)
      }
      utils.del(event, '确定删除？')
    },
    submit() {
      var self = this;
      var url = "/toupiao/admin/updateVote";
      var params = {
        id: self.join.id,
        vote: self.join.vote
      };
      var success = function(response) {
        self.dialogFormVisible = false;
        self.getItems(self.pageIndex);
        self.$message({
          message: '修改成功',
          type: 'success'
        });
      };
      var fail = function() {
        utils.fail('修改失败');
      };
      var complete = function() {};
      utils.requestLoading(url, params, success, fail, complete);
    },
    search() {
      if (this.keyword == '') {
        this.getItems(this.pageIndex);
        return;
      }
      var self = this;
      var url = '';
      var params = {
        keyword: self.keyword,
        page: self.pageIndex
      }
      var success = function(response) {
        self.items = response.info;
        self.page.total = response.total;
        self.page.size = response.size;
      }
      var fail = function() {}
      var complete = function() {}
      utils.requestLoading(url, params, success, fail, complete)
    }
  }
};

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.page {
  position: relative;
  overflow: hidden;
  padding: 20px
}

.top-title {
  margin-left: 20px;
  font-size: 18px;
  font-weight: bold;
}

</style>
